<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:substituteby="navtempStore::docHead(#{storecenter.name},'首页')">
</head>
<body>
<style type="text/css">
    html {
        height: 100%
    }

    body {
        height: 100%;
        margin: 0px;
        padding: 0px
    }
</style>
<nav th:replace="navtempStore::nav(#{storecenter.name})"></nav>
<div class="container">
    <div class="row" style="margin-top: 5em;">
        <div class="col-sm-12 col-md-12">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">体验预约：</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="input-group" style="margin-bottom: .5em;">
                <span class="input-group-addon">&nbsp;姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名&nbsp;</span>
                <input name="description" class="form-control" placeholder="姓名"
                       aria-describedby="basic-username" type="text"/>
            </div>
        </div>
        <div class="col-md-6">
            <div class="input-group" style="margin-bottom: .5em;">
                <span class="input-group-addon">&nbsp;电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话&nbsp;</span>
                <input name="description" class="form-control" placeholder="电话"
                       aria-describedby="basic-username" type="text"/>
            </div>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <ul id="myTab1" class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">
                        课程体验
                    </a>
                </li>
                <li><a href="#pinggu" data-toggle="tab">评估体验</a></li>
            </ul>
            <div id="myTabContent1" class="tab-content">
                <div class="tab-pane fade in active" id="home">
                    <br/>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="input-group" style="margin-bottom: .5em;">
                                <span class="input-group-addon">&nbsp;预约 时间&nbsp;</span>
                                <input name="description" class="form-control" placeholder="预约时间"
                                       aria-describedby="basic-username" type="text"/>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group" style="margin-bottom: .5em;">
                                <span class="input-group-addon">&nbsp;价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格&nbsp;</span>
                                <input name="description" class="form-control" placeholder="价格"
                                       aria-describedby="basic-username" type="text"/>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <!-- Default panel contents -->
                                <div class="panel-heading"><h4>选择课程</h4></div>
                                <!-- Table -->
                                <table class="table">
                                    <thead>
                                    <th></th>
                                    <th>时间</th>
                                    <th>课程名称</th>
                                    <th>简介</th>
                                    <th>教练</th>
                                    <th>教室</th>
                                    <th>剩余可预约人数</th>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><input type="checkbox"/></td>
                                        <td>2017-06-21 10:00</td>
                                        <td><span class="label label-success">常温瑜伽</span></td>
                                        <td>哈他正位哈他正位哈他正位哈他正位</td>
                                        <td>张三</td>
                                        <td>教室1</td>
                                        <td><span class="label label-success">3/10</span></td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox"/></td>
                                        <td>2017-06-21 12:00</td>
                                        <td><span class="label label-success">常温瑜伽</span></td>
                                        <td>哈他正位哈他正位哈他正位哈他正位</td>
                                        <td>李四</td>
                                        <td>教室2</td>
                                        <td><span class="label label-warning">1/10</span></td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox"/></td>
                                        <td>2017-06-21 14:00</td>
                                        <td><span class="label label-success">普拉提</span></td>
                                        <td>哈他正位哈他正位哈他正位哈他正位</td>
                                        <td>王五</td>
                                        <td>教室3</td>
                                        <td><span class="label label-danger">0/10</span></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="pinggu">
                    <br/>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="input-group" style="margin-bottom: .5em;">
                                <span class="input-group-addon">&nbsp;预约 时间&nbsp;</span>
                                <input name="description" class="form-control" placeholder="预约时间"
                                       aria-describedby="basic-username" type="text"/>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group" style="margin-bottom: .5em;">
                                <span class="input-group-addon">&nbsp;价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格&nbsp;</span>
                                <input name="description" class="form-control" placeholder="价格"
                                       aria-describedby="basic-username" type="text"/>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <!-- Default panel contents -->
                                <div class="panel-heading"><h4>选择教练</h4></div>
                                <!-- Table -->
                                <table class="table">
                                    <thead>
                                    <th></th>
                                    <th>教练姓名</th>
                                    <th>简介</th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    </thead>
                                    <tbody>
                                    <tr >
                                        <td><input type="radio" name="jiaolian"/></td>
                                        <td>李四</td>
                                        <td>教练还可以</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr >
                                        <td><input type="radio" name="jiaolian"/></td>
                                        <td>张三</td>
                                        <td>张三教练还可以</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr >
                                        <td><input type="radio" name="jiaolian"/></td>
                                        <td>王五</td>
                                        <td>王五教练还可以</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <ul id="myTab3" class="nav nav-tabs">
                                <li class="active">
                                    <a href="#home" data-toggle="tab">
                                        空闲教室
                                    </a>
                                </li>
                            </ul>
                            <div id="myTabContent3" class="tab-content">
                                <div class="tab-pane fade in active" id="home3">
                                    <br/>
                                    <div class="input-group input-inline">
                                        <input type="radio" name="jiaoshi"/>&nbsp;<button class="btn btn-success btn-sm">教室一</button>&nbsp;&nbsp;
                                        <input type="radio" name="jiaoshi"/>&nbsp;<button class="btn btn-info btn-sm">教室二</button>&nbsp;&nbsp;
                                        <input type="radio" name="jiaoshi"/>&nbsp;<button class="btn btn-success btn-sm">教室三</button>&nbsp;&nbsp;
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><br/>
                </div>
            </div>
        </div>
    </div><br/>
    <div class="row">
        <div class="col-md-1 col-md-offset-5">
            <input type="button" value="预约" class="btn btn-primary btn-block" style="margin: 0 auto; display: block;"
                   onclick="window.location.href='/demo/store/appointment'"/>
        </div>&nbsp;
        <div class="col-md-1">
            <input type="button" value="取消" class="btn btn-danger btn-block" style="margin: 0 auto; display: block;"
                   onclick="window.location.href='/demo/store/appointment'"/>
        </div>
    </div>
</div>
</body>
</html>
